Customizing the Styles of the Default QR Modal

This example shows how to customize the QR modal via parts and CSS variables and change the copy inside the modal.

Result

Loading...

Live Editor

function CustomModal() {
  useLayoutEffect(() => {
    const viewer = document.querySelector("cylindo-viewer");
    viewer.locales = {
      // Concat your translations
      ...viewer.locales,
      en: {
        // Concat default translations
        ...viewer.locales.en,
        viewInAR: "Show Product in your space",
        "qr.alt": "QR kode",
        "qr.usage":
          "Scan the QR code with your phone's or tablet's camera and see this product in your own space.",
        "qr.requirements.key": "Requirements",
        // Combining the css below under "::part(qr-requirements)" with the escape "\n", you can create new lines.
        "qr.requirements.value":
          "Latest iOS or Android operating system installed\non your phone or tablet",
      },
    };
  }, []);

  return (
    <div className="styled-modal">
      {/* For the purpose of the example, we are scoping the styles in the div element. */}
      <style>
        {`
    .styled-modal {
        --qr-corners: transparent;
    }

    .styled-modal ::part(view-in-ar), ::part(qr-fab), ::part(qr-dialog) {
        background-color: #0008;
        color: #e7edf1;
        padding: 4px 8px;
    }

    .styled-modal ::part(view-in-ar){
        border-radius: 8px;
    }

    .styled-modal ::part(qr-backdrop) {
        background-image: url("https://images.pexels.com/photos/1556691/pexels-photo-1556691.jpeg?cs=srgb&dl=pexels-daniel-reche-1556691.jpg&fm=jpg");
    }

    .styled-modal ::part(qr-requirements) {
        color: #b8f8ff;
        font-weight: 500;
        white-space: pre-line;
        text-align: center;
    }

    .styled-modal ::part(qr-usage) {
        color: #eec79f;
    }

      .styled-modal ::part(qr-wrapper) {
        height: 65%;
    }

    .styled-modal ::part(view-in-ar):hover, ::part(qr-fab):hover {
        background-color: #0007;
    }
  
    `}
      </style>
      <cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP" />
      <style></style>
    </div>
  );
}